@import './variable.scss';

.radio-popper[x-placement^='top'] {
  padding: 5px;
  margin-bottom: 5px;
  background: rgba(0, 0, 0, 0.5);
  width: 105px;
  max-width: 105px;
  min-width: 105px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  cursor: default;

  .radio-item {
    width: 95px;
    color: #fff;
    margin: 5px 0px;
  }

  .radio-item:hover {
    color: #0077c5;
  }

  .radio-item.isCurrentRatio {
    color: #0077c5;
  }
}

.multi-screen-popper[x-placement^='top'] {
  padding: 0px;
  margin-bottom: 5px;
  background: rgba(0, 0, 0, 0.5);
  width: 120px;
  min-width: 120px;

  .multi-screen-row {
    display: flex;
    flex-flow: nowrap;
  }

  .multi-screen-col:hover {
    background-color: #557c94;
  }

  .multi-screen-col.isCurrentMuti {
    background-color: #0289e2;
  }
}

.delete-mix-popper {
  padding: 0px;
  margin-bottom: 5px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  width: 160px;
  min-width: 160px;
  height: 160px;

  .delete-mix-box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .item-1 {
      height: 150px;
      width: 150px;
    }

    .item-2-row {
      display: flex;

      .item-2 {
        height: 80px;
        margin: 2px;
      }
    }

    .item-4-row {
      display: flex;

      .item-4 {
        height: 74px;
        width: 74px;
        margin: 2px;
      }
    }

    .item-6-row-1 {
      height: 66.6667%;
      width: 100%;
      display: flex;

      .item-6-col-1 {
        height: 100%;
        width: 66.6667%;

        .item-6-2 {
          width: 101px;
          height: 101px;
          margin: 2px;
        }
      }

      .item-6-col-2 {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 33.3333%;
      }
    }

    .item-6-row-2 {
      height: 33.3333%;
      width: 100%;
      display: flex;
    }

    .item-6-1 {
      height: 49px;
      width: 49px;
      margin: 2px;
    }

    .item-8-row-1 {
      height: 75%;
      width: 100%;
      display: flex;

      .item-8-col-1 {
        height: 100%;
        width: 75%;

        .item-8-3 {
          height: 115px;
          width: 115px;
          margin: 2px auto;
        }
      }

      .item-8-col-2 {
        height: 100%;
        width: 25%;
      }
    }

    .item-8-row-2 {
      height: 25%;
      width: 100%;
      display: flex;
    }

    .item-8-1 {
      height: 36.5px;
      width: 36.5px;
      margin: 2px;
    }

    .item-9-row {
      width: 100%;
      height: 33.3333%;
      display: flex;

      .item-9 {
        height: 48.5px;
        width: 48.5px;
        margin: 2px;
      }
    }

    .svg-icon {
      height: 100%;
      width: 100%;
      color: #fff;
      border: 1px solid #fff;
    }

    .svg-icon:hover {
      background-color: #0077c5;
    }
  }
}